<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=0.33, user-scalable=0.33, minimum-scale=0.33, maximum-scale=0.33">
    <title>WANT</title>
    <link rel="icon" type="image/png" href="res/favicon-32.png" sizes="32x32">
    <!-- Bootstrap core CSS -->
    <link href="script/lib/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="res/w-basic.css?v=20160108" rel="stylesheet">
    <link href="res/w-scene-item.css?v=20160114" rel="stylesheet">
    <style>
      @keyframes fadeInUpBig {
        from { transform: translate3d(0, 1000px, 0); opacity: 0; }
        to { transform: translate3d(0, 0, 0); opacity: 1; }
      }
      @keyframes fadeInUp {
        from { transform: translate3d(0, 350px, 0); opacity: 0; }
        to { transform: translate3d(0, 0, 0); opacity: 1; }
      }
      @keyframes likeAnimate {
        0% {
          opacity: 0;
          transform: scale(1);
        }
        50% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          transform: scale(1.2);
        }
      }
      .fadeInUpBig {
         animation: fadeInUpBig 2s ease;
      }
      .fadeInUp {
         animation: fadeInUp 2s ease;
      }

     </style>
  </head>
  <body role="document">
   <section class="container-fluid affix w-splash" id="w-splash" style="display: none">
      <main class="ws-panel">
        <h2 class="ellipsis">好好吃早餐<span>5款商品</span></h2>
        <p class="wsp-btns">
          <img class="whb-like" src="res/btn_like@3x.png">
          <span>12700</span>
        </p>
        <p>好好吃早餐，早餐叫醒你啊好好吃早餐，早餐叫醒你啊好好吃早餐醒你啊</p>
      </main>
    </section>
    
    <div style="height: 0" class="w-place-holder" id="w-place-holder"></div>
     
    <header class="container-fluid w-header fadeInUp" id="w-header">
    <div class="row">
      <div class="col-xs-12">
        <div class="wh-head" id="wh-head">
          <a target="_self" href="javascript:void(0);" class="whh-btn" id="whh-btn"></a>
          <img class="img-responsive" src="res/Culinary_fruits_front_view.jpg" />
        </div>
        <div style="height: 0" class="wh-place-holder" id="wh-place-holder"></div>
        <p class="wh-btns" id="wh-btns">
          <a class="whb-return" id="whb-return" target="_self" href="javascript:void(0);"><img src="res/btn_return_2xwhite.png"></a>
          <a class="whb-comment" id="whb-comment"  target="_self" href="#">
            <img src="res/btn_comment@3x.png">
            <img style="display: none;" src="res/btn_comment_white@3x.png">
          </a>
          <a class="whb-like" id="whb-like" target="_self" href="#">
            <img src="res/btn_like@3x.png">
            <img style="display: none;" src="res/btn_like_white@3x.png">
            <span>12700</span>
          </a>
          <a class="whb-share" id="whb-share" target="_self" href="#">
            <img src="res/btn_share@3x.png">
            <img style="display: none;"  src="res/btn_share_white@3x.png">
          </a>
        </p>
        <h1 class="ellipsis text-center">好好吃早餐吧健康早餐叫醒你哦</h1>
      </div>
    </div>
    </header>

    <section class="container-fluid w-banner fadeInUpBig" id="w-banner">
      <div class="row">
        <div class="col-xs-12">
          <p>早餐一定吃哦早餐一定吃哦早餐一定吃哦早餐一定吃哦早餐一定吃哦早餐一定吃哦早餐一定吃哦早餐一定吃哦早餐一定吃</p>
        </div>
      </div>
      <h2 class="wb-intro">单品介绍</h2>
      <div class="row">
        <div class="col-xs-12">
          <div class="wb-box">
            <img class="img-responsive center-block" src="res/3d-printer.png" />
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <p>它包括早餐一定吃哦早餐一定吃哦早餐一定吃哦早餐一定吃哦早餐一定吃哦早餐早餐一定吃</p>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <div class="wb-box wb-box2">
            <img class="img-responsive center-block" src="res/3d-printer.png" />
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <p>第三行文字它包括早餐一定吃哦早餐一定吃哦早餐一定吃哦早餐一定吃哦早餐一定吃哦早餐早餐一定吃</p>
        </div>
      </div>
      <h2 class="wb-list">单品列表</h2>
      <div class="row">
        <div class="col-xs-6 wb-thumb-left">
          <img class="img-responsive" src="res/81ebVZtgeWL._SL1500_.jpg" />
        </div>
        <div class="col-xs-6 text-right wb-text-right">
          <h3>标题第一行</h3>
          <h3>标题第二行</h3>
          <p>面包/煎蛋/咖啡</p>
          <p>面包/煎蛋/咖啡</p>
          <a class="btn wbt-price" target="_self" href="#">最低799元</a>
        </div>
      </div>
      <hr class="wb-line" />
      <div class="row">
        <div class="col-xs-6 text-left wb-text-left">
          <h3>标题第一行</h3>
          <h3>标题第二行</h3>
          <p>面包/煎蛋/咖啡</p>
          <p>面包/煎蛋/咖啡</p>
          <a class="btn wbt-price" target="_self" href="#">最低699元</a>
        </div>
        <div class="col-xs-6 wb-thumb-right">
          <img class="img-responsive" src="res/81ebVZtgeWL._SL1500_.jpg" />
        </div>
      </div>
      <hr class="wb-line" />
      <div class="row">
        <div class="col-xs-6 wb-thumb-left">
          <img class="img-responsive" src="res/81ebVZtgeWL._SL1500_.jpg" />
        </div>
        <div class="col-xs-6 text-right wb-text-right">
          <h3>标题第一行</h3>
          <h3>标题第二行</h3>
          <p>面包/煎蛋/咖啡</p>
          <p>面包/煎蛋/咖啡</p>
          <a class="btn wbt-price" target="_self" href="#">最低799元</a>
        </div>
      </div>
    </section>
    <!-- 以下部分在后台无数据时不显示 start-->
    <section class="container-fluid w-relevant">
      <h2>相关攻略</h2>
      <ul class="clearfix wr-container"  id="wr-container">
        <li class="wr-box">
          <a target="_self" href="#"><h3 class="ellipsis">500元能不能买到靠谱的原汁机器？</h3></a>
          <img class="img-responsive" src="res/Culinary_fruits_front_view.jpg" />
        </li>
        <li class="wr-box">
          <a target="_self" href="#"><h3 class="ellipsis">500元能不能买到靠谱的原汁机器？</h3></a>
          <img class="img-responsive" src="res/Culinary_fruits_front_view.jpg" />
        </li>
        <li class="wr-box">
          <a target="_self" href="#"><h3 class="ellipsis">500元能不能买到靠谱的原汁机器？</h3></a>
          <img class="img-responsive" src="res/Culinary_fruits_front_view.jpg" />
        </li>
      </ul>
    </section>
     <!-- 以下部分在后台无数据时不显示 end-->
    <footer class="container-fluid w-footer">
      <div class="row">
        <div class="col-xs-12 text-center">
          <p>来自：<span></span>顽童老王</p>
        </div>
      </div>
    </footer>
    <!-- ================================================== -->
    <script src="script/lib/jquery-2.2.0.min.js"></script>
    <script src="script/lib/greensock/TweenLite.min.js"></script>
    <script src="script/lib/greensock/plugins/CSSPlugin.min.js"></script>
    <script src="script/lib/greensock/plugins/ScrollToPlugin.min.js"></script>
    <script src="script/lib/greensock/utils/Draggable.min.js"></script>
    <script src="script/app/scene-item.js"></script>
  </body>
</html>